<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <body>
        <ui:composition template="/WEB-INF/templates/default_template.xhtml">
            <ui:define name="contenido">
                <h:panelGrid cellspacing="15" width="100%">
                    <h:panelGrid columns="2">
                        <p:graphicImage value="/resources/img/icono-programa2.png" />
                        <p:outputPanel>
                            <h:outputText value="#{perfilEpisodioBean.episodio.programa.nomPrograma}" styleClass="titulo" />
                            <h:outputText value=" > Ep. #{perfilEpisodioBean.codigo}" styleClass="subtitulo" />
                        </p:outputPanel>
                    </h:panelGrid>
                    <h:form id="formEpisodios">
                        <h:panelGrid columns="2" columnClasses="arriba, arriba ancho-total sobresalir">
                            <p:menu>
                                <p:menuitem value="Guión" update=":formEpisodios:outputPanelOpciones" icon="icono-guion" rendered="false">
                                    <f:setPropertyActionListener target="#{perfilEpisodioBean.menu}" value="G" />
                                </p:menuitem>
                                <p:menuitem value="Guión Técnico" update=":formEpisodios:outputPanelOpciones" icon="icono-guiontecnico">
                                    <f:setPropertyActionListener target="#{perfilEpisodioBean.menu}" value="GT" />
                                </p:menuitem>
                                <p:menuitem value="Presupuesto" action="#{perfilEpisodioBean.verPresupuesto()}" update=":formEpisodios:outputPanelOpciones" icon="icono-presupuesto" />
                                <p:menuitem value="Regresar" action="pretty:episodios" icon="icono-regresar" >
                                    <f:setPropertyActionListener target="#{episodioBean.codigo}" value="#{perfilEpisodioBean.episodio.programa.codPrograma}" />
                                </p:menuitem>
                            </p:menu>
                            <p:outputPanel id="outputPanelOpciones">
                                <p:outputPanel rendered="#{perfilEpisodioBean.menu.equalsIgnoreCase('P')}">
                                    <p:fieldset legend="PRESUPUESTO" toggleable="true">
                                        <h:panelGrid columns="2">
                                            <h:outputText value="Episodio: " styleClass="etiqueta" />
                                            <h:outputText value="#{perfilEpisodioBean.episodio.numEpisodio}" />
                                            <h:outputText value="Nombre: " styleClass="etiqueta" />
                                            <h:outputText value="#{perfilEpisodioBean.episodio.nomEpisodio}" />
                                            <h:outputText value="Sinopsis: " styleClass="etiqueta" />
                                            <h:outputText value="#{perfilEpisodioBean.episodio.strSinopsis}" />
                                        </h:panelGrid>
                                    </p:fieldset>
                                    <p:spacer width="8" />
                                    <p:fieldset legend="DETALLES" toggleable="true">
                                        <h:panelGrid id="panelGridDetalles" cellspacing="5" width="100%">
                                            <p:commandButton value="Nuevo Detalle" action="#{perfilEpisodioBean.nuevoDetalle()}" update=":formPresupuesto" oncomplete="registrarDetalle.show();" icon="icono-agregar" />
                                            <p:dataTable value="#{perfilEpisodioBean.detallesPresupuesto}" var="detalle" paginator="true" rows="10" rowsPerPageTemplate="10,20,50" paginatorPosition="bottom" emptyMessage="No hay datos para mostrar" rowStyleClass="encima">
                                                <p:column headerText="Concepto">
                                                    <h:outputText value="#{detalle.nomConcepto}" />
                                                </p:column>
                                                <p:column headerText="Costo Total" width="100">
                                                    <h:outputText value="S/. #{perfilEpisodioBean.getTotalMonto(detalle)}" />
                                                </p:column>
                                                <p:columnGroup type="footer">
                                                    <p:row>
                                                        <p:column footerText="Total:" style="text-align:right" />
                                                        <p:column colspan="2" footerText="S/. #{perfilEpisodioBean.getTotalNeto()}" style="text-align:left" />
                                                    </p:row>
                                                </p:columnGroup>
                                                <p:column width="90">
                                                    <p:commandButton title="Detalles" action="#{perfilEpisodioBean.verItemsDetalle()}" oncomplete="detallesItems.show();" update=":formPresupuesto:panelGridItems" icon="icono-detalles">
                                                        <f:setPropertyActionListener target="#{perfilEpisodioBean.detallePresupuesto}" value="#{detalle}" />
                                                    </p:commandButton>
                                                    <p:commandButton title="Editar" oncomplete="registrarDetalle.show();" update=":formPresupuesto:panelGridDetalle" icon="icono-editar">
                                                        <f:setPropertyActionListener target="#{perfilEpisodioBean.detallePresupuesto}" value="#{detalle}" />
                                                    </p:commandButton>
                                                    <p:commandButton title="Eliminar" icon="icono-eliminar" action="#{perfilEpisodioBean.eliminarDetalle(detalle)}">
                                                        <p:confirm header="ELIMINAR DETALLE" message="Va a eliminar el registro. ¿Desea continuar?" icon="icono-eliminar" />
                                                    </p:commandButton>
                                                </p:column>
                                            </p:dataTable>
                                        </h:panelGrid>
                                    </p:fieldset>
                                </p:outputPanel>
                                <p:outputPanel rendered="#{perfilEpisodioBean.menu.equalsIgnoreCase('G')}">
                                    <p:fieldset legend="GUION" collapsed="true" toggleable="true">
                                    </p:fieldset>
                                </p:outputPanel>
                                <p:outputPanel rendered="#{perfilEpisodioBean.menu.equalsIgnoreCase('GT')}">
                                    <p:fieldset legend="GUION TECNICO" toggleable="true">
                                        <h:panelGrid columns="2">
                                            <h:outputText value="Creación: " styleClass="etiqueta" />
                                            <h:outputText value="#{perfilEpisodioBean.guionTecnico.fecRegistro}">
                                                <f:convertDateTime pattern="dd/MM/yyyy" />
                                            </h:outputText>
                                            <h:outputText value="Episodio: " styleClass="etiqueta" />
                                            <h:outputText value="#{perfilEpisodioBean.episodio.numEpisodio}" />
                                            <h:outputText value="Nombre: " styleClass="etiqueta" />
                                            <h:outputText value="#{perfilEpisodioBean.episodio.nomEpisodio}" />
                                            <h:outputText value="Sinopsis: " styleClass="etiqueta" />
                                            <h:outputText value="#{perfilEpisodioBean.episodio.strSinopsis}" />
                                        </h:panelGrid>
                                    </p:fieldset>
                                    <p:spacer width="8" />
                                    <p:fieldset legend="ESCENAS" toggleable="true">
                                        <h:panelGrid cellspacing="5" width="100%">
                                            <p:commandButton value="Nueva Escena" action="#{perfilEpisodioBean.nuevo()}" update=":formEscena" oncomplete="registrar.show();" icon="icono-agregar" />
                                            <p:dataTable value="#{perfilEpisodioBean.escenas}" var="escena" paginator="true" rows="10" rowsPerPageTemplate="10,20,50" paginatorPosition="bottom" emptyMessage="No hay datos para mostrar" rowStyleClass="encima">
                                                <p:column headerText="Numero" width="50">
                                                    <h:outputText value="#{escena.numEscena}" />
                                                </p:column>
                                                <p:column headerText="Fecha">
                                                    <h:outputText value="#{escena.fecGrabacion}">
                                                        <f:convertDateTime pattern="dd/MM/yyyy" />
                                                    </h:outputText>
                                                </p:column>
                                                <p:column headerText="Inicio">
                                                    <h:outputText value="#{escena.fecGrabacionInicio}">
                                                        <f:convertDateTime pattern="HH:mm:ss" timeZone="GMT-5" />
                                                    </h:outputText>
                                                </p:column>
                                                <p:column headerText="Fin">
                                                    <h:outputText value="#{escena.fecGrabacionFin}">
                                                        <f:convertDateTime pattern="HH:mm:ss" timeZone="GMT-5" />
                                                    </h:outputText>
                                                </p:column>
                                                <p:column headerText="Locación">
                                                    <h:outputText value="#{escena.locacion.nomLocacion}" />
                                                </p:column>
                                                <p:column width="90">
                                                    <p:commandButton title="Detalles" oncomplete="detalles.show();" action="#{perfilEpisodioBean.verDetalles()}" update=":formDetalles:outputPanelOpciones" icon="icono-detalles">
                                                        <f:setPropertyActionListener target="#{perfilEpisodioBean.escena}" value="#{escena}" />
                                                    </p:commandButton>
                                                    <p:commandButton title="Editar" oncomplete="registrar.show();" update=":formEscena" icon="icono-editar">
                                                        <f:setPropertyActionListener target="#{perfilEpisodioBean.escena}" value="#{escena}" />
                                                    </p:commandButton>
                                                    <p:commandButton title="Eliminar" icon="icono-eliminar" action="#{perfilEpisodioBean.eliminar(escena)}">
                                                        <p:confirm header="ELIMINAR ESCENA" message="Va a eliminar el registro. ¿Desea continuar?" icon="icono-eliminar" />
                                                    </p:commandButton>
                                                </p:column>
                                            </p:dataTable>
                                        </h:panelGrid>
                                    </p:fieldset>
                                </p:outputPanel>
                            </p:outputPanel>
                        </h:panelGrid>
                    </h:form>

                    <h:form id="formPresupuesto">
                        <p:dialog widgetVar="registrarPresupuesto" header="GENERAR PRESUPUESTO" resizable="false" modal="true">
                            <h:panelGrid cellspacing="5">
                                <h:outputText value="Este episodio no tiene un presupuesto generado." />
                                <h:outputText value="¿Desea generar el presupuesto ahora?" />
                            </h:panelGrid>
                            <p:separator />
                            <h:panelGrid columns="2"> 
                                <p:commandButton value="Generar" update=":formEpisodios:outputPanelOpciones" action="#{perfilEpisodioBean.generarPresupuesto()}" icon="icono-guardar" />
                                <p:commandButton value="Cerrar" type="button" onclick="registrarPresupuesto.hide();" icon="icono-salir" />
                            </h:panelGrid>
                        </p:dialog>

                        <p:dialog widgetVar="registrarDetalle" header="REGISTRAR DETALLE" resizable="false" modal="true">
                            <h:panelGrid id="panelGridDetalle">
                                <h:outputText value="Concepto: " styleClass="etiqueta" />
                                <p:inputText value="#{perfilEpisodioBean.detallePresupuesto.nomConcepto}" size="50" />
                            </h:panelGrid>
                            <p:separator />
                            <h:panelGrid columns="2">
                                <p:commandButton value="GUARDAR" action="#{perfilEpisodioBean.registrarDetalle()}" update=":mensaje, :formEpisodios:panelGridDetalles" icon="icono-guardar" />
                                <p:commandButton value="Cerrar" type="button" onclick="registrarDetalle.hide();" icon="icono-salir" />
                            </h:panelGrid>
                        </p:dialog>

                        <p:dialog widgetVar="detallesItems" header="ITEMS DEL DETALLE" resizable="false" modal="true">
                            <h:panelGrid id="panelGridItems" cellspacing="5" width="100%">
                                <p:commandButton value="Agregar" action="#{perfilEpisodioBean.nuevoItem()}" oncomplete="registrarItem.show();" update=":formItem" icon="icono-agregar" />
                                <p:dataTable value="#{perfilEpisodioBean.detallesItem}" var="item" paginator="true" rows="10" paginatorPosition="bottom" emptyMessage="No hay datos para mostrar">
                                    <p:column headerText="Nombre">
                                        <h:outputText value="#{item.nomItem}" />
                                    </p:column>
                                    <p:column headerText="Monto">
                                        <h:outputText value="#{item.numMonto}" />
                                    </p:column>
                                    <p:column width="60">
                                        <p:commandButton title="Editar" update=":formItem" oncomplete="registrarItem.show();" icon="icono-editar">
                                            <f:setPropertyActionListener target="#{perfilEpisodioBean.detalleItem}" value="#{item}" />
                                        </p:commandButton>
                                        <p:commandButton title="Eliminar" update=":formPresupuesto:panelGridItems :formEpisodios:panelGridDetalles" action="#{perfilEpisodioBean.eliminarItem()}" icon="icono-eliminar">
                                            <f:setPropertyActionListener target="#{perfilEpisodioBean.detalleItem}" value="#{item}" />
                                        </p:commandButton>
                                    </p:column>
                                </p:dataTable>
                            </h:panelGrid>
                            <p:separator />
                            <h:panelGrid>
                                <p:commandButton value="Cerrar ventana" type="button" onclick="detallesItems.hide();" icon="icono-salir" />
                            </h:panelGrid>
                        </p:dialog>

                    </h:form>
                    <h:form id="formItem">
                        <p:dialog widgetVar="registrarItem" header="REGISTRAR ITEM" resizable="false" modal="true">
                            <h:panelGrid>
                                <h:outputText value="Nombre: " styleClass="etiqueta" />
                                <p:inputText value="#{perfilEpisodioBean.detalleItem.nomItem}" size="50" />
                                <h:outputText value="Monto: " styleClass="etiqueta" />
                                <p:inputText value="#{perfilEpisodioBean.detalleItem.numMonto}" />
                            </h:panelGrid>
                            <p:separator />
                            <h:panelGrid columns="2">
                                <p:commandButton value="GUARDAR" action="#{perfilEpisodioBean.registrarItem()}" update=":mensaje, :formPresupuesto:panelGridItems, :formEpisodios:panelGridDetalles" icon="icono-guardar" />
                                <p:commandButton value="Cerrar" type="button" onclick="registrarItem.hide();" icon="icono-salir" />
                            </h:panelGrid>
                        </p:dialog>
                    </h:form>

                    <h:form id="formEscena">
                        <p:dialog widgetVar="registrar" header="REGISTRO DE ESCENA" resizable="false" modal="true">
                            <h:panelGrid>
                                <h:outputText value="Numero" styleClass="etiqueta" />
                                <p:inputText value="#{perfilEpisodioBean.escena.numEscena}" />
                                <h:outputText value="Fecha Grabación: " styleClass="etiqueta" />
                                <p:calendar value="#{perfilEpisodioBean.escena.fecGrabacion}" pattern="dd/MM/yyyy" showOn="button" />
                                <h:outputText value="Inicio: " styleClass="etiqueta" />
                                <p:calendar value="#{perfilEpisodioBean.escena.fecGrabacionInicio}" timeOnly="true" pattern="HH:mm" showOn="button" />
                                <h:outputText value="Fin: " styleClass="etiqueta" />
                                <p:calendar value="#{perfilEpisodioBean.escena.fecGrabacionFin}" timeOnly="true" pattern="HH:mm" showOn="button" />
                                <h:outputText value="Locación: " styleClass="etiqueta" />
                                <p:selectOneMenu value="#{perfilEpisodioBean.escena.locacion.codLocacion}">
                                    <f:selectItem itemLabel="SELECCIONAR" itemValue="0" />
                                    <f:selectItems value="#{locacionBean.locaciones}" var="locacion" itemLabel="#{locacion.nomLocacion}" itemValue="#{locacion.codLocacion}" />
                                </p:selectOneMenu>
                            </h:panelGrid>
                            <p:separator />
                            <h:panelGrid columns="2">
                                <p:commandButton value="GUARDAR" action="#{perfilEpisodioBean.registrar()}" update=":formEpisodios:outputPanelOpciones, :mensaje" icon="icono-guardar" />
                                <p:commandButton value="Cancelar" type="button" onclick="registrar.hide();" icon="icono-salir" />
                            </h:panelGrid>
                        </p:dialog>
                    </h:form>
                    <h:form id="formDetalles">
                        <p:dialog widgetVar="detalles" header="DETALLES DE ESCENA" resizable="false" modal="true" width="735">
                            <h:panelGrid columns="2" columnClasses="arriba, arriba ancho-total">
                                <p:menu>
                                    <p:menuitem value="Locación" icon="icono-guion" update="outputPanelOpciones">
                                        <f:setPropertyActionListener target="#{perfilEpisodioBean.opcion}" value="L" />
                                    </p:menuitem>
                                    <p:menuitem value="Actores" icon="icono-guiontecnico" update="outputPanelOpciones">
                                        <f:setPropertyActionListener target="#{perfilEpisodioBean.opcion}" value="A" />
                                    </p:menuitem>
                                    <p:menuitem value="Vestuarios" icon="icono-guiontecnico" update="outputPanelOpciones">
                                        <f:setPropertyActionListener target="#{perfilEpisodioBean.opcion}" value="V" />
                                    </p:menuitem>
                                    <p:menuitem value="Utilerias" icon="icono-guiontecnico" update="outputPanelOpciones">
                                        <f:setPropertyActionListener target="#{perfilEpisodioBean.opcion}" value="U" />
                                    </p:menuitem>
                                </p:menu>
                                <p:outputPanel id="outputPanelOpciones">
                                    <p:panel>
                                        <h:panelGrid id="panelGridLocacion" rendered="#{perfilEpisodioBean.opcion.equalsIgnoreCase('L')}" width="100%">
                                            <h:outputText value="Locación" styleClass="subtitulo etiqueta" />
                                            <h:panelGrid columns="2" cellspacing="5">
                                                <h:outputText value="Nombre: " styleClass="etiqueta" />
                                                <h:outputText value="#{perfilEpisodioBean.escena.locacion.nomLocacion}" />
                                                <h:outputText value="Dirección: " styleClass="etiqueta" />
                                                <h:outputText value="#{perfilEpisodioBean.escena.locacion.strDireccion}" />
                                                <h:outputText value="Distrito: " styleClass="etiqueta" />
                                                <h:outputText value="#{perfilEpisodioBean.escena.locacion.distrito.nomDistrito}" />
                                            </h:panelGrid>
                                            <p:galleria value="#{perfilEpisodioBean.imagenes}" var="imagen" panelWidth="500" panelHeight="300" autoPlay="false">
                                                <p:graphicImage value="/temp/#{perfilEpisodioBean.getNombreImagen(imagen)}" style="max-width: 500px; max-height: 300px" />
                                            </p:galleria>
                                        </h:panelGrid>
                                        <h:panelGrid id="panelGridActores" rendered="#{perfilEpisodioBean.opcion.equalsIgnoreCase('A')}" width="100%">
                                            <h:outputText value="Actores" styleClass="subtitulo etiqueta" />
                                            <h:panelGrid cellspacing="5" width="100%">
                                                <p:dataTable value="#{perfilEpisodioBean.actores}" var="actor" paginator="true" rows="10" paginatorPosition="bottom" emptyMessage="No hay datos para mostrar">
                                                    <p:column headerText="Nombre Artistico">
                                                        <h:outputText value="#{actor.nomArtistico}" />
                                                    </p:column>
                                                </p:dataTable>
                                            </h:panelGrid>
                                        </h:panelGrid>
                                        <h:panelGrid id="panelGridVestuarios" rendered="#{perfilEpisodioBean.opcion.equalsIgnoreCase('V')}" width="100%">
                                            <h:outputText value="Vestuarios" styleClass="subtitulo etiqueta" />
                                            <h:panelGrid cellspacing="5" width="100%">
                                                <p:dataTable value="#{perfilEpisodioBean.vestuarios}" var="vestuario" paginator="true" rows="10" paginatorPosition="bottom" emptyMessage="No hay datos para mostrar">
                                                    <p:column headerText="Nombre">
                                                        <h:outputText value="#{vestuario.nomVestuario}" />
                                                    </p:column>
                                                </p:dataTable>
                                            </h:panelGrid>
                                        </h:panelGrid>
                                        <h:panelGrid id="panelGridUtilerias" rendered="#{perfilEpisodioBean.opcion.equalsIgnoreCase('U')}" width="100%">
                                            <h:outputText value="Utilerias" styleClass="subtitulo etiqueta" />
                                            <h:panelGrid cellspacing="5" width="100%">
                                                <p:dataTable value="#{perfilEpisodioBean.utilerias}" var="utileria" paginator="true" rows="10" paginatorPosition="bottom" emptyMessage="No hay datos para mostrar">
                                                    <p:column headerText="Nombre">
                                                        <h:outputText value="#{utileria.nomUtileria}" />
                                                    </p:column>
                                                    <p:column headerText="Categoria">
                                                        <h:outputText value="#{utileria.categoria.nomCategoria}" />
                                                    </p:column>
                                                    <p:column headerText="Estado">
                                                        <h:outputText value="#{utileria.estado.nomEstado}" />
                                                    </p:column>
                                                    <p:column headerText="Color">
                                                        <h:outputText value="#{utileria.color.nomColor}" />
                                                    </p:column>
                                                </p:dataTable>
                                            </h:panelGrid>
                                        </h:panelGrid>
                                    </p:panel>
                                </p:outputPanel>
                            </h:panelGrid>
                            <p:separator />
                            <h:panelGrid>
                                <p:commandButton value="Cerrar ventana" type="button" onclick="detalles.hide();" icon="icono-salir" />
                            </h:panelGrid>
                        </p:dialog>
                    </h:form>
                </h:panelGrid>
            </ui:define>
        </ui:composition>
    </body>
</html>
